<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制台</title>
</head>
<body>
    <div th:fragment="content">
        <div class="container-fluid">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="h3">控制台</h2>
                <div>
                    <button class="btn btn-primary" onclick="refreshData()">
                        <i class="fas fa-sync-alt me-1"></i> 刷新数据
                    </button>
                </div>
            </div>

            <div class="alert alert-info mb-4">
                <i class="fas fa-info-circle me-2"></i>
                欢迎使用外卖配送管理系统，请从左侧菜单选择功能。
            </div>

            <div class="row mb-4">
                <div class="col-md-6 col-lg-3 mb-3">
                    <div class="stat-card">
                        <div class="stat-card-title">总订单数</div>
                        <div class="stat-card-value" th:text="${totalOrders}">-</div>

                    </div>
                </div>
                <div class="col-md-6 col-lg-3 mb-3">
                    <div class="stat-card">
                        <div class="stat-card-title">配送员数量</div>
                        <div class="stat-card-value" th:text="${totalCouriers}">-</div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">最近订单</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-container">
                                <table class="data-table">
                                    <thead>
                                        <tr>
                                            <th>订单ID</th>
                                            <th>用户</th>
                                            <th>配送员</th>
                                            <th>金额</th>
                                            <th>配送地址</th>
                                            <th>状态</th>
                                            <th>创建时间</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr th:each="order : ${recentOrders}" th:if="${recentOrders != null and not #lists.isEmpty(recentOrders)}">
                                            <td th:text="${order['order_id']}"></td>
                                            <td th:text="${order['username']}"></td>
                                            <td th:text="${order['courier_id'] != null ? '配送员#' + order['courier_id'] : '未分配'}"></td>
                                            <td th:text="'¥' + ${order['total_amount']}"></td>
                                            <td th:text="${order['address']}"></td>
                                            <td>
                                                <span th:if="${order['delivery_status'] == 'pending'}" class="badge badge-warning">待配送</span>
                                                <span th:if="${order['delivery_status'] == 'in_transit'}" class="badge badge-primary">配送中</span>
                                                <span th:if="${order['delivery_status'] == 'completed'}" class="badge badge-success">已完成</span>
                                                <span th:if="${order['delivery_status'] == 'cancelled'}" class="badge badge-danger">已取消</span>
                                            </td>
                                            <td th:text="${#temporals.format(order['created_at'], 'yyyy-MM-dd HH:mm')}"></td>
                                        </tr>
                                        <tr th:if="${recentOrders == null or #lists.isEmpty(recentOrders)}">
                                            <td colspan="7" class="text-center">暂无最近订单数据</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            function refreshData() {
                location.reload();
            }

            // 在页面加载时标记当前菜单为活动状态
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelectorAll('.sidebar-menu a').forEach(a => {
                    a.classList.remove('active');
                });
                document.getElementById('menu-dashboard').classList.add('active');
            });
        </script>
    </div>
</body>
</html>
